<template>
    <div class="register">
        <el-form :model="registerForm" label-width="0">
            <el-form-item>
                <el-input v-model="registerForm.tel" placeholder="手 机 号"/>
            </el-form-item>
            <el-form-item>
                <el-row :gutter="10">
                    <el-col :span="15">
                        <el-input v-model="registerForm.yzm" placeholder="验 证 码"/>
                    </el-col>
                    <el-col :span="9">
                        <el-button type="primary" style="width: 100%;">获取验证码</el-button>
                    </el-col>
                </el-row>     
            </el-form-item>
            <el-form-item>
                <el-input v-model="registerForm.password" type="password" placeholder="密 码" show-password/>
            </el-form-item>
            <el-form-item >
                <el-button type="primary" style="width: 100%;">注册</el-button>
            </el-form-item>
        </el-form>
        <div class="toLogin">
            <el-button link @click="loginClick">已有帐号？登录</el-button>        
        </div>
    </div>
</template>

<script setup>
import { reactive } from "vue";
const emit = defineEmits(['isLogin'])
const registerForm = reactive({
    tel: '',
    yzm: '',
    password: ''
})

const loginClick = () => {
    emit('isLogin', 0)
}
</script>

<style lang="scss" scoped>
.register{
    width: 100%;
    height: 100%;
    > .toLogin{
        text-align: center;
        height: 35px;
        line-height: 35px;
    }
}

</style>